<template>
    <div id="big">
        <div id="box">
            <span id="back" class="fa fa-angle-left" @touchstart="back"></span>
            <div id="dalei">
                <span id="lei">{{list.bigclasses}}</span>
                <span id="lline">|</span>
            </div>
            <span id="search" class="fa fa-search" @touchstart="find"></span>
            <input type="text" v-model="name">
            <span class="fa fa-bars" id="user"></span>
        </div>

        <div id="change">
            <div>分类</div>
            <div class="line">|</div>
            <div>销量</div>
            <div class="line">|</div>
            <div @touchstart="price" ref="price">价格↓</div>
            <div class="line">|</div>
            <div>评论</div>
        </div>
        <div id="page" ref="jiazai" @scroll="scroll">
            <div v-for="n in catlist" id="outer">
                <router-link :to="'/third/user/goodsdetail/'+n._id">
                    <div id="leftbox"><img :src="n.img[0]"></div>

                    <div id="rightbox">
                        <div id="top">
                            <p id="de">{{n.detail}}</p>
                        </div>
                        <div id="bottom">
                            <div>
                                <span class="bo" id="bo">￥{{n.price}}</span>
                            </div>
                            <div>
                                <span class="bo">评价200</span>
                                <span class="bo">已售3000</span>
                            </div>
                        </div>
                    </div>
                </router-link>
            </div>
            <div id="spinner" v-if="show">
                <span class="fa fa-spinner fa-spin"></span>
            </div>

            <div id="spinner" v-if="!show">
                <span>到底了</span>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
    data: function() {
        return {
            list: [],
            click: false,
            ccc: false,
            name: "",
            isLoading: false,
            currentScrollTop: 0,
            // goodslist: [],
            show: true


        }
    },
    computed: {
        str: function() {
            return this.$route.params.abc;
        },
        ...mapState([
            "catlist"
        ]),

        // page: function() {
        //     return this.catlist.length
        // }
    },
    activated: function() {
        // console.log(this.catlist.length)
        this.$refs.jiazai.scrollTop = this.currentScrollTop;
        var param = {
            class: this.str,
            // i: this.catlist.length
        }
        this.$store.dispatch("requestcatlist2", param)

        this.http.post("/api/catlist", param)
            .then(res => {
                this.list = res.data.data[0]
            })

    },
    mounted: function() {
        // this.more();
        // console.log(this.catlist.length)
        var param = {
            class: this.str,
            i: this.catlist.length
        }
        this.$store.dispatch("requestcatlist2", param)

        this.http.post("/api/catlist", param)
            .then(res => {
                this.list = res.data.data[0]
            })
    },

    methods: {
        more: function() {
            if (this.isLoading) {
                return;
            } else {
                this.isLoading = true;
                var param = {
                    class: this.str,
                    i: this.catlist.length
                }
                this.$store.dispatch("requestcatlist4", param)
                    .then(res => {


                        if (res.data.data.length < 5) {
                            this.show = false
                        }

                        this.isLoading = false;
                    })

            }
        },

        scroll: function() {
            var a = this.$refs.jiazai.scrollHeight - this.$refs.jiazai.offsetHeight - this.$refs.jiazai.scrollTop
            if (a < 10) {
                this.more()

            }
            this.currentScrollTop = this.$refs.jiazai.scrollTop;

        },
        back: function() {
            history.back()
        },
        price: function() {
            var param = {
                class: this.str
            }

            this.click = !this.click
            if (this.ccc == false && this.click == false) {
                this.$refs.price.textContent = "价格↑"
                this.$store.dispatch("requestcatlist", param);
            } else if (this.ccc == false && this.click == true) {
                this.$refs.price.textContent = "价格↓"
                this.$store.dispatch("requestcatlist3", param);

            } else if (this.ccc == true && this.click == false) {
                this.$refs.price.textContent = "价格↑"
                var param = {
                    name: this.name,
                    bigclasses: this.list.bigclasses
                }
                this.$store.dispatch("requesttwodetail", param);
            } else if (this.ccc == true && this.click == true) {
                this.$refs.price.textContent = "价格↓"
                var param = {
                    name: this.name,
                    bigclasses: this.list.bigclasses
                }
                this.$store.dispatch("requesttwodetail2", param);
            }

        },
        find: function() {
            this.ccc = true
            var param = {
                name: this.name,
                bigclasses: this.list.bigclasses
            }
            this.$store.dispatch("requesttwodetail", param);
        }
    }
}
</script>

<style scoped>
#spinner {
    width: 100%;
    height: 5vh;
    text-align: center;
    line-height: 5vh;
    border: solid 1px #dbdbdb;
    border-top: none;
}

#page {
    height: 88vh;
    overflow-y: scroll;
    margin-top: 12vh;
}

#big {
    height: 100vh;
    overflow-y: scroll;
    position: relative;
}

a {
    text-decoration: none;
    color: black;
    cursor: pointer;
    font-size: 14px;
    width: 100%;
    height: 20vh;
    /* border: solid 1px #dbdbdb; */
    display: flex;
}

#box #dalei {
    position: absolute;
    top: 1vh;
    left: 19vw;
    width: 15vw;
    height: 5vh;
    background-color: lightgray;
}

#lei {
    /* position: absolute; */
    top: 1.5vh;
    left: 22vw;
    line-height: 5vh;
    margin-left: 2vw;
}

#lline {
    /* position: absolute; */
    top: 1.5vh;
    left: 32vw;
    color: gray;
    line-height: 5vh
}

#change {
    cursor: pointer;
    width: 100%;
    height: 5vh;
    border-left: solid 1px #dbdbdb;
    border-right: solid 1px #dbdbdb;
    border-bottom: solid 1px #dbdbdb;
    /* margin-top: 7vh; */
    position: fixed;
    top: 7vh;
    left: 0;
    background-color: white;
}

#change div {
    display: inline-block;
    width: 22vw;
    line-height: 5vh;
    text-align: center;
}

#change .line {
    display: inline-block;
    width: 0.5vw;
    line-height: 5vh;
    text-align: center;
}

#outer {
    cursor: pointer;
    font-size: 14px;
    width: 100%;
    height: 20vh;
    border: solid 1px #dbdbdb;
    display: flex;
    /* text-align: center; */
}

#de {
    margin-top: 2vh;
}

#bo {
    color: red;
    font-size: 14px;
}

.bo {
    margin-bottom: 2vh;
    font-size: 12px;
}

#leftbox {
    width: 25vw;
    height: 20vh;
    /* border:solid 1px black; */
}

#rightbox {
    width: 75vw;
    height: 20vh;
    /* border:solid 1px black; */
}

#top {
    width: 70vw;
    height: 12vh;
    /* border:solid 1px black; */
}

#bottom {
    width: 70vw;
    height: 8vh;
    /* border:solid 1px black; */
    display: flex;
    justify-content: space-between
}

img {
    width: 20vw;
    height: 12vh;
    margin-top: 2.5vh;
    margin-left: 2vw;
}

#box {
    width: 100%;
    height: 7vh;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    /* z-index: 200; */
    border: solid 1px lightgray;
}

input {
    margin-left: 34vw;
    margin-top: 1vh;
    /* background-color: #FFFFFF; */
    width: 48vw;
    height: 5vh;
    border: solid 1px lightgray;
    /* border-radius: 8px; */
    background-color: lightgray;
}

#back {
    position: absolute;
    font-size: 30px;
    color: red;
    top: 1.2vh;
    left: 4vw;
}

#user {
    position: absolute;
    font-size: 25px;
    color: red;
    top: 1.5vh;
    right: 4vw;
}

#search {
    position: absolute;
    font-size: 25px;
    color: white;
    top: 1.4vh;
    right: 21vw;
}

span {
    cursor: pointer;
}

p {
    margin: 0;
}
</style>